<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>设置</title>
<link href="/html/set_main.css" rel="stylesheet">
</head>
<body>
	<div class="main">
		<nav>
		<ul id="parent_li">
			<!-- todo  -->
		</ul>
		</nav>
		<div class="rightmenu">
			<div class="rightmenu_head">
				<ul>
					<!-- todo -->
				</ul>

			</div>
			<div class="rightmenu_content">
			</div>
			
			<div id="rightmenu_add" class="rightmenu_add">
				<form action="">
				    分类名称： <input name="name" type="text"/>
					<select class="select_parent" name="p_id" onchange="parentChange(this.value)"> 
	                    <!--  todo -->
		            </select>
					<select id="select_son" name="s_id"> 
						<option value="0"> 请选择... </option>
	                    <!--  todo -->
		            </select>
			        <input type="submit" id="addTSetBtn" value="新增"/>
					<input type="submit" id="updateTSetBtn" value="修改"/>
    			</form>
			</div>
			
			
			<div id="rightmenu_delect">
				<form action="">
					<select class="select_parent" name="p_id" onchange="parentChange02(this.value)"> 
	                    <!--  todo -->
		            </select>
					<select id="select_son02" name="s_id"> 
						<option value="0"> 请选择... </option>
	                    <!--  todo -->
		            </select>
			        <input type="submit" id="delectTSetBtn" value="提交" onclick="setTime(this)" />

    			</form>
			</div>
		</div>
	</div>

</body>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script type="text/javascript">
	/* 子类开关 */
	var tag = 0;
	
	/* 渲染父类 */
	$(document).ready(function() {
		$.getJSON("/selectSon/0.json", function(result) {
			var html = '';
			$.each(result, function(i, data) {
				html += '<li id="parent_' + data.id + '" class="nav_item" onclick="selectSon(this)" value="'+data.id+'"><strong>+</strong><span>'+data.name+'</span></li>';

			});
			$("#parent_li").append(html);
			
			/* 要改进 */
			/* 渲染下拉框 */
			html = '<option value="0"> 新增大类 </option>';
			$.each(result, function(i, data) {
				html += '<option value="' +data.id+ '">' +data.name+ '</option>';
			});
			$(".select_parent").html(html);
		});
	});
	
	/* 点父类取子类 */
	function selectSon(val){
		if(tag == 0){
			var id = val.value
			$.getJSON("/selectSon/"+id+".json", function(result) {
				/* 渲染导航栏 */
				var html = '<div class="nav_son">';
				$.each(result, function(i, data) {
					html += '<li onclick="showSet(this)" value="'+data.id+'"><span class="nav_item">'+data.name+'</span></li>';
				});
				html += '</div>';
				/* 要改进 */
				sonDivId = "#parent_"+id;
				$(sonDivId).after(html);
			});
			tag = 1;
			
			
			return;
		}
		if(tag == 1){
			/* 要改进 */
			$(".nav_son").css("display","none");
			tag = 0;
		}
	} 
	
	/* 右边菜单 */
	function showSet(val){
		var id = val.value;
		$.getJSON("/getSet/" +id+ ".json", function(result) {
			var html = '<li onclick="showSet02(this)" value="'+result.id+'">' + result.name + '<span onclick="shutSet(this)"><strong>    -</strong></span></li>';
			$(".rightmenu_head ul").append(html);
			$(".rightmenu_content").empty();
			html = '<p>'+result.content+'</P>'
			$(".rightmenu_content").html(html);
		});
	}
	function showSet02(val){
		var id = val.value;
		$.getJSON("/getSet/" +id+ ".json", function(result) {
			$(".rightmenu_content").empty();
			var html = '<p>'+result.content+'</P>'
			$(".rightmenu_content").html(html);
		});
	}
	
	/* 关闭选项卡 */
	function shutSet(val){
			$(".rightmenu_content").empty();
			val.parentNode.parentNode.removeChild(val.parentNode);
	}
	
	/* 下拉框父类改变， */
	function parentChange(id){
		$.getJSON("/selectSon/"+id+".json", function(result) {
			html = '<option value="0"> 请选择... </option>';
			$.each(result, function(i, data) {
				html += '<option value="' +data.id+ '">' +data.name+ '</option>';
			});
			$("#select_son").html(html);
		})
	}
	function parentChange02(id){
		$.getJSON("/selectSon/"+id+".json", function(result) {
			html = '<option value="0"> 请选择... </option>';
			$.each(result, function(i, data) {
				html += '<option value="' +data.id+ '">' +data.name+ '</option>';
			});
			$("#select_son02").html(html);
		})
	}
	
	/* 新增 */
	$('#addTSetBtn').click(function(){
		var name = $('#rightmenu_add input[name="name"]').val();
		var id = $('#rightmenu_add select[name="p_id"]').val();
		$.ajax({
			type : 'POST',
			url : '/addTSet',
			data : {
				name : name,
				parentId : id
			},
			dataType : "json",
			success : function(data){
				alert(data);
			}
		});
	})
	
	/* 修改 */
	$('#updateTSetBtn').click(function(){
		var id;
		var name = $('#rightmenu_add input[name="name"]').val();
		var p_id = $('#rightmenu_add select[name="p_id"]').val();
		var s_id = $('#rightmenu_add select[name="s_id"]').val();
		id = s_id;
		if(s_id==0){
			id = p_id;
		} 
		$.ajax({
			type : 'POST',
			url : '/updateTSet',
			data : {
				name : name,
				id : id
			},
			dataType : "json",
			success : function(data){
				alert(data);
			}
		});
	})
	
	
	/* 删除 */
	function deleteSet(){
		var id;
		var p_id = $('#rightmenu_delect select[name="p_id"]').val();
		var s_id = $('#rightmenu_delect select[name="s_id"]').val();
		id = s_id;
		if(s_id==0){
			id = p_id;
		} 
		$.ajax({
			type : 'POST',
			url : '/delectTSet',
			data : {
				id : id
			},
			dataType : "json",
			success : function(data){
				alert(data);
			}
		});
	}
	
	
	/* 倒计时 */
	var countDown = 5;
	function setTime() {
		if (countDown == 0) {
			$("#delectTSetBtn").prop({
				"value" : "提交",
				"disabled" : ""
			});
			countDown = 5;
			deleteSet(); 
			return;
		}
		if (countDown > 0) {
			$("#delectTSetBtn").prop({
				"value" : "重新提交(" + countDown + ")",
				"disabled" : "true"
			});
			countDown--;
		}
		setTimeout("setTime()", 1000)
	} 
</script>
</html>